<template>
	<view class="typing-container">
		<!-- 测试说明阶段 -->
		<view class="instruction-stage" v-if="currentStage === 'instruction'">
			<view class="header">
				<text class="title">打字速度测试</text>
				<text class="subtitle">测试你的打字速度和准确率</text>
			</view>
			
			<view class="instruction-content">
				<view class="instruction-item">
					<view class="step-number">1</view>
					<text class="step-text">准确输入显示的文本</text>
				</view>
				<view class="instruction-item">
					<view class="step-number">2</view>
					<text class="step-text">尽可能快速且准确</text>
				</view>
				<view class="instruction-item">
					<view class="step-number">3</view>
					<text class="step-text">获得WPM和准确率评分</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<text class="selector-title">选择难度</text>
				<view class="difficulty-options">
					<view 
						class="difficulty-option" 
						v-for="level in difficultyLevels" 
						:key="level.id"
						:class="{ active: selectedDifficulty === level.id }"
						@click="selectDifficulty(level.id)"
					>
						<text class="option-name">{{ level.name }}</text>
						<text class="option-desc">{{ level.description }}</text>
					</view>
				</view>
			</view>
			
			<view class="time-selector">
				<text class="selector-title">测试时长</text>
				<view class="time-options">
					<view 
						class="time-option" 
						v-for="time in timeOptions" 
						:key="time.value"
						:class="{ active: selectedTime === time.value }"
						@click="selectTime(time.value)"
					>
						<text class="time-text">{{ time.label }}</text>
					</view>
				</view>
			</view>
			
			<view class="stats-preview">
				<view class="stat-item">
					<text class="stat-label">最高WPM</text>
					<text class="stat-value">{{ bestWPM || 0 }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">平均准确率</text>
					<text class="stat-value">{{ averageAccuracy || 0 }}%</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">测试次数</text>
					<text class="stat-value">{{ testCount }}次</text>
				</view>
			</view>
			
			<button class="start-btn" @click="startTest">开始测试</button>
		</view>
		
		<!-- 准备阶段 -->
		<view class="ready-stage" v-if="currentStage === 'ready'">
			<view class="ready-content">
				<text class="ready-text">准备开始</text>
				<text class="ready-subtitle">{{ selectedTime }}秒打字测试</text>
				<view class="countdown">{{ countdown }}</view>
			</view>
		</view>
		
		<!-- 测试阶段 -->
		<view class="test-stage" v-if="currentStage === 'testing'">
			<view class="test-header">
				<view class="timer-display">
					<text class="timer-label">剩余时间</text>
					<text class="timer-value">{{ remainingTime }}s</text>
				</view>
				<view class="stats-display">
					<view class="stat-item">
						<text class="stat-label">WPM</text>
						<text class="stat-value">{{ currentWPM }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">准确率</text>
						<text class="stat-value">{{ Math.round(currentAccuracy * 100) }}%</text>
					</view>
				</view>
			</view>
			
			<view class="text-display">
				<view class="text-content">
					<text 
						v-for="(char, index) in displayText" 
						:key="index"
						:class="getCharClass(index)"
						class="char"
					>{{ char }}</text>
				</view>
			</view>
			
			<view class="input-area">
				<textarea 
					class="typing-input" 
					v-model="userInput" 
					@input="handleInput"
					@focus="handleFocus"
					@blur="handleBlur"
					placeholder="开始输入..."
					:disabled="!isTestActive"
					auto-focus
				></textarea>
			</view>
			
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressPercentage + '%' }"></view>
			</view>
			
			<view class="test-actions">
				<button class="reset-btn" @click="resetTest">重新开始</button>
				<button class="stop-btn" @click="stopTest">结束测试</button>
			</view>
		</view>
		
		<!-- 结果阶段 -->
		<view class="result-stage" v-if="currentStage === 'result'">
			<view class="result-header">
				<text class="result-title">测试完成</text>
				<text class="result-subtitle">打字速度测试结果</text>
			</view>
			
			<view class="main-results">
				<view class="main-stat">
					<text class="main-label">打字速度</text>
					<text class="main-value">{{ finalWPM }}</text>
					<text class="main-unit">WPM</text>
					<text class="main-level">{{ getWPMLevel(finalWPM) }}</text>
				</view>
				
				<view class="accuracy-stat">
					<text class="accuracy-label">准确率</text>
					<text class="accuracy-value">{{ Math.round(finalAccuracy * 100) }}%</text>
					<view class="accuracy-bar">
						<view class="accuracy-fill" :style="{ width: (finalAccuracy * 100) + '%' }"></view>
					</view>
				</view>
			</view>
			
			<view class="detail-stats">
				<view class="detail-item">
					<text class="detail-label">总字符数</text>
					<text class="detail-value">{{ totalChars }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">正确字符</text>
					<text class="detail-value">{{ correctChars }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">错误字符</text>
					<text class="detail-value">{{ errorChars }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">测试时长</text>
					<text class="detail-value">{{ selectedTime }}s</text>
				</view>
			</view>
			
			<view class="performance-feedback">
				<text class="feedback-text">{{ getPerformanceFeedback() }}</text>
			</view>
			
			<view class="action-buttons">
				<button class="retry-btn" @click="resetTest">重新测试</button>
				<button class="home-btn" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'

// 测试状态
const currentStage = ref('instruction') // instruction, ready, testing, result
const selectedDifficulty = ref(1)
const selectedTime = ref(60)
const countdown = ref(3)
const remainingTime = ref(60)
const isTestActive = ref(false)
const testStartTime = ref(0)
const testEndTime = ref(0)

// 文本和输入
const displayText = ref('')
const userInput = ref('')
const currentPosition = ref(0)

// 统计数据
const totalChars = ref(0)
const correctChars = ref(0)
const errorChars = ref(0)
const currentWPM = ref(0)
const currentAccuracy = ref(1)
const finalWPM = ref(0)
const finalAccuracy = ref(1)

// 定时器
const testTimer = ref(null)
const countdownTimer = ref(null)
const statsTimer = ref(null)

// 历史数据
const bestWPM = ref(null)
const averageAccuracy = ref(null)
const testCount = ref(0)

// 配置选项
const difficultyLevels = ref([
	{ id: 1, name: '简单', description: '常用词汇' },
	{ id: 2, name: '中等', description: '混合文本' },
	{ id: 3, name: '困难', description: '复杂句子' }
])

const timeOptions = ref([
	{ value: 30, label: '30秒' },
	{ value: 60, label: '60秒' },
	{ value: 120, label: '2分钟' },
	{ value: 300, label: '5分钟' }
])

// 测试文本库
const textLibrary = {
	1: [ // 简单
		'今天天气很好，阳光明媚，适合出门散步。',
		'我喜欢读书，因为书籍能够开阔视野。',
		'学习是一个持续的过程，需要坚持不懈。',
		'友谊是人生中最珍贵的财富之一。',
		'健康的生活方式包括合理饮食和适量运动。'
	],
	2: [ // 中等
		'科技的发展改变了我们的生活方式，让沟通变得更加便捷，但同时也带来了新的挑战。',
		'教育不仅仅是知识的传授，更重要的是培养学生的思维能力和创新精神。',
		'环境保护是全人类共同的责任，我们应该从日常生活中的小事做起。',
		'艺术作品能够触动人心，让我们感受到美的力量和情感的共鸣。',
		'时间管理是现代人必须掌握的重要技能，它能帮助我们提高工作效率。'
	],
	3: [ // 困难
		'人工智能技术的快速发展正在深刻地改变着各个行业的运作模式，从医疗诊断到金融分析，从自动驾驶到智能制造，AI的应用领域越来越广泛。',
		'全球化进程中，不同文化之间的交流与碰撞催生了新的思想火花，但同时也面临着如何在保持文化多样性的前提下实现和谐共存的挑战。',
		'可持续发展理念要求我们在追求经济增长的同时，必须考虑环境保护和社会公平，这需要政府、企业和个人的共同努力。',
		'量子计算作为下一代计算技术的代表，其独特的并行处理能力有望在密码学、药物研发、气候模拟等领域带来革命性的突破。',
		'数字化转型不仅仅是技术的升级，更是组织文化和商业模式的根本性变革，需要企业具备前瞻性的战略思维和敏捷的执行能力。'
	]
}

// 计算属性
const progressPercentage = computed(() => {
	return displayText.value.length > 0 ? (currentPosition.value / displayText.value.length) * 100 : 0
})

// 页面加载时获取历史数据
onMounted(() => {
	loadHistoryData()
})

// 页面卸载时清理定时器
onUnmounted(() => {
	clearAllTimers()
})

// 加载历史数据
const loadHistoryData = () => {
	try {
		const history = uni.getStorageSync('typingTestHistory')
		if (history) {
			bestWPM.value = history.bestWPM
			averageAccuracy.value = history.averageAccuracy
			testCount.value = history.testCount || 0
		}
	} catch (e) {
		console.error('加载历史数据失败:', e)
	}
}

// 保存测试结果
const saveTestResult = () => {
	try {
		const history = uni.getStorageSync('typingHistory') || []
		
		// 创建新的测试记录
		const newRecord = {
			wpm: finalWPM.value,
			accuracy: finalAccuracy.value * 100,
			correctChars: correctChars.value,
			errorChars: errorChars.value,
			totalChars: totalChars.value,
			testDuration: selectedTime.value,
			difficulty: selectedDifficulty.value,
			timestamp: new Date().toISOString(),
			date: new Date().toLocaleDateString('zh-CN'),
			score: Math.round(finalWPM.value * finalAccuracy.value)
		}
		
		// 添加到历史记录
		history.push(newRecord)
		
		// 保持最近50条记录
		if (history.length > 50) {
			history.shift()
		}
		
		uni.setStorageSync('typingHistory', history)
		
		// 触发成就系统检查
		triggerAchievementCheck()
		
		// 更新当前显示的数据
		const allWPMs = history.map(record => record.wpm)
		bestWPM.value = Math.max(...allWPMs)
		const allAccuracies = history.map(record => record.accuracy)
		averageAccuracy.value = Math.round(allAccuracies.reduce((sum, acc) => sum + acc, 0) / allAccuracies.length)
		testCount.value = history.length
	} catch (e) {
		console.error('保存测试结果失败:', e)
	}
}

// 触发成就系统检查
const triggerAchievementCheck = () => {
	try {
		// 检查打字速度成就
		if (finalWPM.value >= 80) {
			const speedTrigger = {
				type: 'typing_speed',
				value: finalWPM.value,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('typingSpeedTrigger', speedTrigger)
		}
		
		// 检查测试完成成就
		const testCompleteTrigger = {
			type: 'test_completed',
			value: 1,
			timestamp: new Date().toISOString()
		}
		uni.setStorageSync('testCompleteTrigger', testCompleteTrigger)
		
		// 检查完美分数成就（准确率99%以上）
		if (finalAccuracy.value >= 0.99) {
			const perfectTrigger = {
				type: 'perfect_score',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('perfectScoreTrigger', perfectTrigger)
		}
		
		// 检查时间相关成就
		const currentHour = new Date().getHours()
		if (currentHour >= 22 || currentHour <= 6) {
			const nightTrigger = {
				type: 'night_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('nightTestTrigger', nightTrigger)
		} else if (currentHour >= 5 && currentHour <= 8) {
			const earlyTrigger = {
				type: 'early_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('earlyTestTrigger', earlyTrigger)
		}
	} catch (e) {
		console.error('触发成就检查失败:', e)
	}
}

// 清理所有定时器
const clearAllTimers = () => {
	if (testTimer.value) {
		clearInterval(testTimer.value)
		testTimer.value = null
	}
	if (countdownTimer.value) {
		clearInterval(countdownTimer.value)
		countdownTimer.value = null
	}
	if (statsTimer.value) {
		clearInterval(statsTimer.value)
		statsTimer.value = null
	}
}

// 选择难度
const selectDifficulty = (level) => {
	selectedDifficulty.value = level
}

// 选择时间
const selectTime = (time) => {
	selectedTime.value = time
}

// 开始测试
const startTest = () => {
	currentStage.value = 'ready'
	generateTestText()
	startCountdown()
}

// 生成测试文本
const generateTestText = () => {
	const texts = textLibrary[selectedDifficulty.value]
	let selectedTexts = []
	
	// 根据测试时长选择足够的文本
	const estimatedCharsNeeded = selectedTime.value * 5 // 假设平均每秒5个字符
	let totalLength = 0
	
	while (totalLength < estimatedCharsNeeded && selectedTexts.length < texts.length * 3) {
		const randomText = texts[Math.floor(Math.random() * texts.length)]
		selectedTexts.push(randomText)
		totalLength += randomText.length
	}
	
	displayText.value = selectedTexts.join(' ')
}

// 开始倒计时
const startCountdown = () => {
	countdown.value = 3
	countdownTimer.value = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer.value)
			startTypingTest()
		}
	}, 1000)
}

// 开始打字测试
const startTypingTest = () => {
	currentStage.value = 'testing'
	remainingTime.value = selectedTime.value
	isTestActive.value = true
	testStartTime.value = Date.now()
	userInput.value = ''
	currentPosition.value = 0
	totalChars.value = 0
	correctChars.value = 0
	errorChars.value = 0
	
	// 启动测试计时器
	testTimer.value = setInterval(() => {
		remainingTime.value--
		if (remainingTime.value <= 0) {
			endTest()
		}
	}, 1000)
	
	// 启动统计更新计时器
	statsTimer.value = setInterval(() => {
		updateStats()
	}, 100)
	
	// 聚焦输入框
	nextTick(() => {
		const input = document.querySelector('.typing-input')
		if (input) input.focus()
	})
}

// 处理输入
const handleInput = () => {
	if (!isTestActive.value) return
	
	currentPosition.value = userInput.value.length
	updateStats()
	
	// 检查是否完成所有文本
	if (currentPosition.value >= displayText.value.length) {
		endTest()
	}
}

// 处理焦点
const handleFocus = () => {
	// 输入框获得焦点时的处理
}

const handleBlur = () => {
	// 输入框失去焦点时的处理
	if (isTestActive.value) {
		// 重新聚焦
		nextTick(() => {
			const input = document.querySelector('.typing-input')
			if (input) input.focus()
		})
	}
}

// 更新统计数据
const updateStats = () => {
	if (!isTestActive.value) return
	
	totalChars.value = currentPosition.value
	correctChars.value = 0
	errorChars.value = 0
	
	// 计算正确和错误字符数
	for (let i = 0; i < currentPosition.value; i++) {
		if (i < displayText.value.length) {
			if (userInput.value[i] === displayText.value[i]) {
				correctChars.value++
			} else {
				errorChars.value++
			}
		}
	}
	
	// 计算准确率
	currentAccuracy.value = totalChars.value > 0 ? correctChars.value / totalChars.value : 1
	
	// 计算WPM (Words Per Minute)
	const elapsedTime = (Date.now() - testStartTime.value) / 1000 / 60 // 分钟
	if (elapsedTime > 0) {
		// 假设平均每个词5个字符
		currentWPM.value = Math.round((correctChars.value / 5) / elapsedTime)
	}
}

// 获取字符样式类
const getCharClass = (index) => {
	if (index < currentPosition.value) {
		// 已输入的字符
		if (index < userInput.value.length) {
			return userInput.value[index] === displayText.value[index] ? 'correct' : 'incorrect'
		}
		return 'missing'
	} else if (index === currentPosition.value) {
		// 当前位置
		return 'current'
	} else {
		// 未输入的字符
		return 'pending'
	}
}

// 重置测试
const resetTest = () => {
	clearAllTimers()
	currentStage.value = 'instruction'
	userInput.value = ''
	currentPosition.value = 0
	isTestActive.value = false
}

// 停止测试
const stopTest = () => {
	endTest()
}

// 结束测试
const endTest = () => {
	isTestActive.value = false
	testEndTime.value = Date.now()
	clearAllTimers()
	
	// 计算最终统计数据
	const actualTestTime = (testEndTime.value - testStartTime.value) / 1000 / 60 // 分钟
	finalWPM.value = actualTestTime > 0 ? Math.round((correctChars.value / 5) / actualTestTime) : 0
	finalAccuracy.value = totalChars.value > 0 ? correctChars.value / totalChars.value : 1
	
	currentStage.value = 'result'
	saveTestResult()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取WPM等级
const getWPMLevel = (wpm) => {
	if (wpm >= 80) return '专业级'
	if (wpm >= 60) return '熟练级'
	if (wpm >= 40) return '中级'
	if (wpm >= 20) return '初级'
	return '入门级'
}

// 获取性能反馈
const getPerformanceFeedback = () => {
	const wpm = finalWPM.value
	const accuracy = finalAccuracy.value * 100
	
	if (wpm >= 60 && accuracy >= 95) {
		return '出色！你的打字速度和准确率都很优秀！'
	} else if (wpm >= 40 && accuracy >= 90) {
		return '很好！继续练习可以达到更高水平！'
	} else if (wpm >= 20 && accuracy >= 85) {
		return '不错！多加练习可以提高速度和准确率！'
	} else {
		return '继续努力！熟能生巧，多练习会有进步！'
	}
}
</script>

<style lang="scss" scoped>
.typing-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

// 说明阶段样式
.instruction-stage {
	flex: 1;
	padding: 40rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	flex-direction: column;
	overflow-y: auto;

	.header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.title {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 16rpx;
		}
		
		.subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.instruction-content {
		margin-bottom: 40rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.step-number {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}
			
			.step-text {
				font-size: 30rpx;
			}
		}
	}
	
	.difficulty-selector, .time-selector {
		margin-bottom: 40rpx;
		
		.selector-title {
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			text-align: center;
			margin-bottom: 30rpx;
		}
	}
	
	.difficulty-options {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.difficulty-option {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border: 2rpx solid rgba(255, 255, 255, 0.2);
			border-radius: 20rpx;
			text-align: center;
			transition: all 0.3s ease;
			
			&.active {
				background: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.5);
				transform: scale(1.02);
			}
			
			.option-name {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.option-desc {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
			}
		}
	}
	
	.time-options {
		display: flex;
		justify-content: space-between;
		gap: 15rpx;
		
		.time-option {
			flex: 1;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border: 2rpx solid rgba(255, 255, 255, 0.2);
			border-radius: 15rpx;
			text-align: center;
			transition: all 0.3s ease;
			
			&.active {
				background: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.5);
				transform: scale(1.05);
			}
			
			.time-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	
	.stats-preview {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-label {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.stat-value {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
			}
		}
	}
	
	.start-btn {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 50rpx;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: auto;
		
		&:active {
			opacity: 0.8;
		}
	}
}

// 准备阶段样式
.ready-stage {
	flex: 1;
	background: #4CAF50;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	
	.ready-content {
		text-align: center;
		
		.ready-text {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 20rpx;
		}
		
		.ready-subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
			margin-bottom: 40rpx;
		}
		
		.countdown {
			font-size: 120rpx;
			font-weight: bold;
			animation: pulse 1s infinite;
		}
	}
}

// 测试阶段样式
.test-stage {
	flex: 1;
	padding: 40rpx;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	
	.test-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: white;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.timer-display {
			text-align: center;
			
			.timer-label {
				font-size: 24rpx;
				color: #666;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.timer-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: block;
			}
		}
		
		.stats-display {
			display: flex;
			gap: 30rpx;
			
			.stat-item {
				text-align: center;
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin-bottom: 5rpx;
				}
				
				.stat-value {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					display: block;
				}
			}
		}
	}
	
	.text-display {
		flex: 1;
		padding: 30rpx;
		background: white;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
		overflow-y: auto;
		
		.text-content {
			font-size: 32rpx;
			line-height: 1.8;
			font-family: 'Courier New', monospace;
			
			.char {
				position: relative;
				
				&.correct {
					background: #d4edda;
					color: #155724;
				}
				
				&.incorrect {
					background: #f8d7da;
					color: #721c24;
				}
				
				&.current {
					background: #007bff;
					color: white;
					animation: blink 1s infinite;
				}
				
				&.pending {
					color: #666;
				}
				
				&.missing {
					background: #fff3cd;
					color: #856404;
				}
			}
		}
	}
	
	.input-area {
		margin-bottom: 30rpx;
		
		.typing-input {
			width: 100%;
			height: 120rpx;
			padding: 20rpx;
			border: 2rpx solid #ddd;
			border-radius: 15rpx;
			font-size: 32rpx;
			font-family: 'Courier New', monospace;
			resize: none;
			outline: none;
			
			&:focus {
				border-color: #007bff;
				box-shadow: 0 0 10rpx rgba(0, 123, 255, 0.3);
			}
			
			&:disabled {
				background: #f8f9fa;
				color: #6c757d;
			}
		}
	}
	
	.progress-bar {
		height: 8rpx;
		background: #e9ecef;
		border-radius: 4rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		
		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #007bff, #0056b3);
			transition: width 0.3s ease;
		}
	}
	
	.test-actions {
		display: flex;
		gap: 20rpx;
		
		.reset-btn, .stop-btn {
			flex: 1;
			height: 70rpx;
			border: none;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: bold;
			
			&:active {
				opacity: 0.8;
			}
		}
		
		.reset-btn {
			background: #6c757d;
			color: white;
		}
		
		.stop-btn {
			background: #dc3545;
			color: white;
		}
	}
}

// 结果阶段样式
.result-stage {
	flex: 1;
	padding: 40rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	overflow-y: auto;
	
	.result-header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.result-title {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 16rpx;
		}
		
		.result-subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.main-results {
		margin-bottom: 40rpx;
		
		.main-stat {
			text-align: center;
			margin-bottom: 30rpx;
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			
			.main-label {
				font-size: 28rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.main-value {
				font-size: 80rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.main-unit {
				font-size: 32rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.main-level {
				font-size: 28rpx;
				padding: 8rpx 20rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 15rpx;
				display: inline-block;
			}
		}
		
		.accuracy-stat {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			text-align: center;
			
			.accuracy-label {
				font-size: 28rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 15rpx;
			}
			
			.accuracy-value {
				font-size: 48rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 20rpx;
			}
			
			.accuracy-bar {
				height: 12rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 6rpx;
				overflow: hidden;
				
				.accuracy-fill {
					height: 100%;
					background: #4CAF50;
					transition: width 0.5s ease;
				}
			}
		}
	}
	
	.detail-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
		
		.detail-item {
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			text-align: center;
			
			.detail-label {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.detail-value {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
			}
		}
	}
	
	.performance-feedback {
		text-align: center;
		margin-bottom: 40rpx;
		padding: 30rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		
		.feedback-text {
			font-size: 30rpx;
			line-height: 1.6;
			display: block;
		}
	}
	
	.action-buttons {
		display: flex;
		gap: 20rpx;
		
		.retry-btn, .home-btn {
			flex: 1;
			height: 80rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 40rpx;
			color: white;
			font-size: 28rpx;
			font-weight: bold;
			background: rgba(255, 255, 255, 0.1);
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

// 动画效果
@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}
</style>
